<template>
    <div>
        <ul class="top-list">
          <li class="stop-city" v-for="(item,index) in stop" :key="item.id">
            <div class="stop-list">
               <img :src="item.imgUrl" alt="">
                <div class="xiq">
                  <h1>{{item.title}}</h1>
                  <div><span>{{item.peope}}</span>人感兴趣 <span class="peop">{{item.pin}}</span>人评论</div>
                  <p><span>￥</span><span class="mant">{{item.money}}</span>起</p>
                </div>
            </div>
            <div class="bot-stop">
              <div class="bpt-stop">
                <img src="http://s.qunarzz.com/piao/image/touch/channel/comment.png" alt=""><span>{{item.user}}</span><span  class="user">{{item.timer}}</span>
              </div>
              <h2>{{item.shen}}</h2>
            </div>
          </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Topspot",
        data(){
          return{
              stop:[
                {
                  id:"001",
                  imgUrl:"http://img1.qunarzz.com/sight/p0/1411/1a/5582f9f24bc50b475a8cbda4c5ac8d24.water.jpg_200x200_a0d48950.jpg",
                  title:"秦始皇陵博物院(兵马俑)",
                  peope:15870,pin:139458,
                  money:108,
                  user:"D*8",
                  timer:"2020-2-3",
                  shen:"太好玩了，非常帅气"
                },
                {
                  id:"002",
                  imgUrl:"http://img1.qunarzz.com/sight/p0/1505/18/18ffcca94b1b7ca2.water.jpg_200x200_9b0d2dc4.jpg",
                  title:"长恨歌",
                  peope:15855,pin:23000,
                  money:58,
                  user:"Y*9",
                  timer:"2019-5-3",
                  shen:"太好玩了，很纳斯"
                },{
                  id:"003",
                  imgUrl:"http://img1.qunarzz.com/sight/p0/1411/b8/f5fd5955bdecc923ce6d40ce453160eb.water.jpg_200x200_5032ab39.jpg",
                  title:"陕西历史博物馆",
                  peope:14590,pin:23555,
                  money:79,
                  user:"G*54",
                  timer:"2020-5-9",
                  shen:"额滴神呢，真牛皮"
                },{
                  id:"004",
                  imgUrl:"http://img1.qunarzz.com/sight/p0/1602/53/53cf6caed9f9b9ee90.img.jpg_200x200_f5476a84.jpg",
                  title:"华清宫",
                  peope:15570,pin:195558,
                  money:62,
                  user:"O*5",
                  timer:"2019-5-3",
                  shen:"优秀的非常"
                },



              ]
          }
        }
    }
</script>

<style scoped lang="stylus">
    .top-list{
      .stop-city {
        padding:.1rem;
        .stop-list {
          display: flex;
          img{
            width :1rem;
            padding:0 .1rem .1rem 0;
          }
          .xiq{
            h1{
              font-size :.16rem;
              line-height :.28rem;
            }
            div{
               line-height :.35rem;
               font-size :.12rem;
               color :#9e9e9e;
               span{
                  color :#00afc7;
                  font-size :.16rem;
               }
              .peop{
                  margin-left :.2rem;
              }
            }
            p{
              margin-top :.25rem;
              font-size :.14rem;
              span{
                color :orange;
              }
              .mant{
                font-size :.18rem;
              }
            }
          }
        }
        .bot-stop{
           background :#f6f6f6;
           line-height :.23rem;
           padding:.05rem;
           border-radius :.05rem;
          .bpt-stop{
              img{
                width :.12rem;
                margin:0 .05rem;
              }
            .user{
                  margin-left :68%;
                  color :#9e9e9e;
            }
          }
          h2{
            margin-left :.05rem;
          }
        }
      }
    }
</style>
